<template>
  <a-card :bordered="false" class="withdrawal">
    <div class="headers">
      <p>{{balance}}</p>
      <p>资金池余额</p>
      <a-button @click="withdrawal">充值</a-button>
    </div>
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="15" :sm="15">
            <a-form-item label="记录时间" :labelCol="{span: 2}" :wrapperCol="{span: 12, offset: 1}">
              <section class="time-box">
                <j-date v-model="queryParam.createTimeFrom" :showTime="true" date-format="YYYY-MM-DD"
                  style="width:43%;min-width:0;" placeholder="开始时间"></j-date>
                <span style="felx:1"> - </span>
                <j-date v-model="queryParam.createTimeTo" :showTime="true" date-format="YYYY-MM-DD"
                  style="width:43%;min-width:0;" placeholder="结束时间"></j-date>
              </section>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="7">
            <a-button type="primary" @click="getList" icon="search">搜索</a-button>
            <a-button style="margin-left: 8px" @click="onClose">刷新</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :pagination="ipagination"
        :rowSelection="{selectedRowKeys:selectedRowKeysArrey,onChange:onSelectChange}" @change="changePage"
        :dataSource="List" :loading="loading">
      </a-table>
    </section>
    <a-modal v-model="showWithdrawal" title="充值操作" @cancel="cancel" mask @ok="withdrawalOk" :destroyOnClose="true"
      width='40%'>
      <a-form-item label="金额" :labelCol="{span:3}" :wrapperCol="{span:10,offset:1}">
        <a-input placeholder="请输入金额,最少0.01元" v-model="price" />
      </a-form-item>
    </a-modal>
    <a-modal v-model="success" title="支付" mask @ok="getList" :destroyOnClose="true" width='20%'>
      <p>是否支付成功</p>
    </a-modal>
  </a-card>
</template>
<script>
import {
  postAction,
  getAction
} from '@/api/manage'
import store from '@/store'
export default {
  data() {
    return {
      loading: false,
      success: false,
      showWithdrawal: false,
      queryParam: {},
      price: '',
      List: [],
      balance: '0', //账户余额
      selectedRowKeysArrey: [], //选中的id
      chooseOrder: '', // 选中的数据
      isBranchFlag: false,// 当前登录用户是否分站用户
      columns: [
        {
          title: '流水记录ID',
          align: "center",
          dataIndex: 'id',
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'remark',
        },
        {
          title: '变更类型',
          align: "center",
          dataIndex: 'type',
          customRender: (value, row, index) => {
            let obj;
            if (value == 1) {
              obj = "客户发单折扣"
            }
            if (value == 2) {
              obj = "取消订单折扣返还"
            }
            if (value == 3) {
              obj = "购买优惠卷"
            }
            if (value == 4) {
              obj = "优惠卷过期退回"
            }
            if (value == 5) {
              obj = "分站充值"
            }
            if (value == 6) {
              obj = "分站提现到资金池"
            }
            if (value == 7) {
              obj = "骑士补贴流水"
            }
            return obj
          }
        },
        {
          title: '操作时间',
          align: "center",
          dataIndex: 'createTime',
        }
      ],
      //标记页数；页码
      ipagination: {
        current: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        total: 0
      },

      url: {
        list: '/coupon/list',
        price: '/salesChange/goPayment2'
      }
    }
  },
  created() {
    console.log(this.$store.state.user.info.branchId, "获取当前登录用户的分站");
    const ut = store.getters.userInfo.userType;
    this.isBranchFlag = (ut == 2 || ut == 3) ? true : false;
    if (this.isBranchFlag) {
      this.queryParam.branchId = store.getters.userInfo.branchId;
    }
    this.getList()
  },
  methods: {
    getList() {
      this.success = false
      getAction(this.url.balance).then(res => {
        console.log(res)
        this.balance = res.result
      })
      this.loading = true
      getAction(this.url.list, this.queryParam).then(result => {
        if (result.success) {
          this.loading = false
        }
        this.List = result.result.records
        this.ipagination.total = result.result.total;  // 页数
        console.log(result)
      })
    },
    onClose() {
      this.queryParam = []
      this.getList();
    },
    // 充值
    withdrawal() {
      this.showWithdrawal = true
    },
    withdrawalOk() {
      if (this.price < 0.01) {
        this.$message.warning("请大于0.01元")
        return
      }
      getAction(this.url.price, { amount: this.price }).then(res => {
        const routeData = this.$router.resolve({
          path: '/content/zhifu',
          query: { data: res }
        })
        console.log(routeData)
        window.open(routeData.href, '_blank')
        this.cancel()
        this.success = true
      })
    },
    cancel() {
      this.price = ""
      this.showWithdrawal = false
    },
    // 选中一行
    onSelectChange(a, b) {
      this.selectedRowKeysArrey = a;
      this.chooseOrder = b[0];
      console.log(this.chooseOrder, "选中的数据");
      this.add = this.chooseOrder
    },
    // 代理列表改变分页
    changePage(pagination) {
      console.log(pagination);
      this.ipagination.current = pagination.current
      this.queryParam.pageNo = pagination.current;
      this.queryParam.pageSize = pagination.pageSize;
      this.getList();
    },
  }
}
</script>
<style lang="less" scoped>
.modal {
  .modeal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
  button {
    position: absolute;
    right: 50px;
  }
  .pooltable {
    padding-top: 50px;
  }
}

.withdrawal {
  .headers {
    box-shadow: none;
    text-align: center;
    p:nth-child(1) {
      margin-bottom: 0 !important;
      color: #000;
      font-size: 30px;
    }
    p:nth-child(2) {
      color: #000;
      font-size: 16px;
    }
    button {
      border-radius: 20px;
      margin: 0 10px;
    }
  }
  .time {
    margin-top: 30px;
  }
  .theknightSearch {
    padding: 15px 10px;
    .ant-form-item {
      width: 100%;
    }
  }
  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin-bottom: 0px !important;
  }
}
</style>